<template>
  <Header></Header>
  <div class="container">
    <div class="top-bar">
      <router-link to="/home" style="text-decoration: none">
        <el-button type="primary" icon="el-icon-arrow-left">返回上一级</el-button>
      </router-link>
      <span class="quick-buy">快捷购买</span>
    </div>

    <div class="main-content">
      <el-form :model="buyForm" label-width="120px" class="buy-form">
        <el-form-item label="选择数字货币">
          <el-select v-model="buyForm.currency" placeholder="请选择货币" style="width: 80%">
            <el-option
                v-for="item in currencyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="操作类型">
          <el-radio-group v-model="buyForm.type">
            <el-radio :value="'buy'">买入</el-radio>
            <el-radio :value="'sell'">卖出</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="金额" class="amount-item">
          <el-input v-model="buyForm.amount" placeholder="请输入金额"></el-input>
        </el-form-item>

        <el-form-item label="货币数量" class="amount-item">
          <el-input :value="calculateAmount" readonly></el-input>
        </el-form-item>

        <el-form-item label="手续费" class="amount-item">
          <el-input :value="calculateFee" readonly></el-input>
        </el-form-item>

        <el-form-item>
          <el-button :type="buttonType"
                     :disabled="isButtonDisabled"
                     @click="submitBuy"
          >提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <Footer></Footer>
</template>

<script setup>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import {ref, computed, onUnmounted} from 'vue';
import { ElMessage } from 'element-plus';

const buyForm = ref({
  currency: '',
  type: '',
  amount: ''
});


const currencyOptions = ref([
  { value: 'BTC', label: '比特币' },
  { value: 'ETH', label: '以太坊' },
  { value: 'LTC', label: '莱特币' },
]);

const calculateAmount = computed(() => {
  return parseFloat(buyForm.value.amount) * 0.1;
});

const calculateFee = computed(() => {
  return parseFloat(buyForm.value.amount) * 0.01;
});

//用户防抖功能。
const isButtonDisabled = ref(false);
const submitBuy = () => {
  ElMessage.success('操作成功');
  isButtonDisabled.value = true;

  const timer = setTimeout(() => {
    isButtonDisabled.value = false;
  }, 5000);

  onUnmounted(() => {
    clearTimeout(timer);
  });
};

const buttonType = computed(() => {
  return isButtonDisabled.value ? '' : 'primary';
});
</script>

<style scoped>
.container {
  margin-top: 55px;
  display: flex;
  flex-direction: column;
  height: 500px;
  background-color: #f4f4f4;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.quick-buy {
  font-size: 20px;
  font-weight: bold;
  color: #333333;
  margin-left: 40px;
}

.main-content {
  flex: 1;
  max-width: 600px;
  width: 90%;
  height: 50px;
  padding: 20px;
  margin: 0 auto;
  background-color: #ffffff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.buy-form {
  display: flex;
  flex-direction: column;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  color: #666666; /* 标签文本颜色 */
}

.amount-item {
  width: 80%; /* 宽度 */
}

.el-input__inner,
.el-select,
.el-button {
  border-radius: 4px;
  width: 80%;
}

.el-input__inner,
.el-select .el-input__inner {
  border-color: #dcdcdc;
}
el-button {
  background-color: #409eff;
  border-color: #409eff;
  color: #ffffff;
  transition: background-color 0.3s, border-color 0.3s;
}


.el-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
</style>